<template>
  <el-dialog
    :model-value="modelValue"
    width="1000px"
    title="新增任务"
    @close="handleClose"
  >
    <el-form label-width="120px" class="task-update">
      <el-row>
        <el-col
          v-for="item in formColumn"
          :key="item.prop"
          :span="item.span ?? 12"
        >
          <el-form-item :label="item.label" :prop="item.prop">
            <s-job
              v-if="item.formType === 'jobType'"
              v-bind="item.formTypeOpt"
              v-model="formState[item.prop]"
            ></s-job>
            <task-type
              v-else-if="item.formType === 'taskType'"
              v-bind="item.formTypeOpt"
              v-model="formState[item.prop]"
            />
            <task-level
              v-else-if="item.formType === 'taskLevel'"
              v-bind="item.formTypeOpt"
              v-model="formState[item.prop]"
            />

            <el-date-picker
              v-else-if="item.formType === 'datePicker'"
              v-bind="item.formTypeOpt"
              v-model="formState[item.prop]"
            />
            <el-input
              v-else-if="item.formType === 'textarea'"
              v-bind="item.formTypeOpt"
              type="textarea"
            />
            <el-input
              v-else
              v-bind="item.formTypeOpt"
              v-model="formState[item.prop]"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="handleClose"> 取消 </el-button>
      <el-button type="primary" @click="handleSure"> 确定 </el-button>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { Resp } from "@/api/instance/types"
import { TaskDataDTO } from "@/api/task/types"
import { ElDatePicker, ElInput, InputInstance } from "element-plus"
import { PropType } from "vue"
import SJob from "./sJob/sJob.vue"
import TaskLevel from "./taskLevel/taskLevel"
import TaskType from "./taskType"
import { createTaskApi } from "@/api/task"

const emits = defineEmits(["update:modelValue", "success"])

const props = defineProps({
  data: {
    type: Object as PropType<TaskDataDTO>,
    default: null,
  },
  modelValue: {
    type: Boolean as PropType<boolean>,
    default: false,
  },
  upateRequest: {
    type: Function as PropType<
      ((data: Partial<TaskDataDTO>) => Promise<Resp<TaskDataDTO>>) | undefined
    >,
    default: undefined,
  },
  createRequest: {
    type: Function,
    default: undefined,
  },
})

const isUpdate = props.data !== null

const handleClose = () => {
  emits("update:modelValue", false)
}

type InputProps = InputInstance["$props"]
type DatePicker = InstanceType<typeof ElDatePicker>["$props"]

const formColumn: Array<{
  label: string
  prop: keyof TaskDataDTO
  formType?:
    | "input"
    | "textarea"
    | "select"
    | "datePicker"
    | "jobType"
    | "taskLevel"
    | "taskType"
  formTypeOpt?: unknown
  span?: number
}> = [
  {
    label: "任务名称",
    prop: "taskName",
    span: 24,
  },
  {
    label: "任务类型",
    prop: "taskType",
    formType: "taskType",
  },
  {
    label: "任务优先级",
    prop: "taskLevel",
    formType: "taskLevel",
  },
  {
    label: "任务负责人",
    prop: "taskLeader",
  },
  {
    label: "小组负责人",
    prop: "groupLeader",
  },
  {
    label: "任务开始时间",
    prop: "startTime",
    formType: "datePicker",
  },
  {
    label: "任务结束时间",
    prop: "endTime",
    formType: "datePicker",
  },
  {
    label: "任务岗位",
    prop: "jobType",
    formType: "jobType",
  },
  {
    label: "任务描述",
    prop: "remarks",
    formType: "textarea",
    formTypeOpt: {
      rows: 6,
    },
    span: 24,
  },
]

const formState = ref<Partial<TaskDataDTO>>({
  taskName: "",
  taskLeader: "",
  taskLevel: "3",
  taskType: "3",
  taskStatus: "3",
  jobType: "web",
  startTime: Date.now(),
  endTime: Date.now() + 1000 * 60 * 60,
  progress: 0,
  remarks: "",
  description: "",
  groupLeader: "",
  workload: 0,
  weekTime: 1,
})

const updateRequestFn = async () => {
  if (!props.upateRequest) {
    return
  }
  const { success, data } = await props.upateRequest(formState.value)
  if (success) {
    handleClose()
    emits("success", formState.value)
    console.log("data :>> ", data)
  }
}

const createRequestFn = async () => {
  // if (!props.createRequest) {
  //   return
  // }
  const { success, data } = await createTaskApi(formState.value)
  if (success) {
    handleClose()
    emits("success", formState.value)
    console.log("data :>> ", data)
  }
}

const handleSure = async () => {
  if (isUpdate) {
    updateRequestFn()
    return
  }
  createRequestFn()
}
</script>

<style lang="less" scoped>
.task-update {
  height: 50vh;
}
</style>
